<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=p, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style type="text/css">
/* 伪元素，表示元素的一些特殊位置 */
/* 第一个字样式 */
p::first-letter{
 font-size: 20px;
 color: red
}
/* 第一行样式 */
p::first-line{
    background-color: blue
}
/* 标签开始>之后 和 内容开始之间的样式，可输入文字，不可用鼠标选中 */
p::before{
    content: "这是before文字";
    color: pink;
}
/* 标签结束</之前 和内容结束之间的样式，可输入内容，不可用鼠标选中 */
p::after{
    content: "这是after的文字";
    color: yellow
}
</style>
<body>
    <p>这是一个p 标签dasdasdkdfjasdjfkljaskldfjalkjsdkfaksdjfnkanjs;dnfkajsdkfjnaksdfknajsd,kfnja;ksdnjfkanjsdkfjasdf</p>
</body>
</html>